<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.bg{width: 343px;height: 480px;background-image: url(img/bg.jpg);margin: 30px auto;overflow: hidden;position: relative;}
		.score{margin-top: 30px;height: 30px;text-align: center;line-height: 30px;color: white;font-size: 30px;position: relative;}
		.logo{width: 236px;height: 77px;background-image: url(img/head.jpg);position: absolute;top: 120px;left: 50%;margin-left: -118px;animation: logoRun 1s infinite alternate linear;}
		.logobird{position: absolute;top: 50%;margin-top: -13px;right: 0;width: 40px;height: 26px;background-image: url(img/bird0.png);animation: logobridRun 0.3s infinite alternate linear}
		.button{height: 29px;margin-top: 220px;position: relative;z-index: 10;}
		.button div{width: 85px;height: 29px;float: left;}
		.button .start{background-image: url(img/start.jpg);margin-left: 75px;}
		.button .submit{background-image: url(img/submit.jpg);margin-left: 10px;}
		.road{width: 686px;height: 14px;background-image: url(img/slider.jpg);animation: 2s linear roadRun infinite;position: absolute;bottom: 44px;}
		.brid{width: 40px;height: 30px;background: url(img/bird0.png) no-repeat;position: absolute;left: 40px;top: 190px;}
		@keyframes roadRun{
			from{
				margin-left: 0px;
			}
			to{
				margin-left: -343px;
			}
		}
		@keyframes logoRun{
			from{
				top: 100px;
			}
			to{
				top: 150px;
			}
		}
		@keyframes logobridRun{
			from{
				background-image: url(img/bird0.png);
			}
			to{
				background-image: url(img/bird1.png);
			}
		}
		.zzBox{width: 343px;height: 421px;position: absolute;top: 0;left: 0;}
		.zz{width: 62px;height: 421px;position: absolute;top: 0px;left: 343px;}
		.zz div{width: 62px;}
		.zz .upBody{background-image: url(img/up_mod.png);}
		.zz .upHead{height: 60px;background-image: url(img/up_pipe.png);}
		.zz .downHead{height: 60px;background-image: url(img/down_pipe.png);position: absolute;}
		.zz .downBody{background-image: url(img/down_mod.png);position: absolute;}
	</style>
</head>
<body>
	<div class="bg">
		<div class="score">0</div>
		<div class="logo">
			<div class="logobird"></div>
		</div>
		<div class="button">
			<div class="start"></div>
			<div class="submit"></div>
		</div>
		<div class="road"></div>
		<div class="zzBox"></div>
		<div class="gameover"></div>
	</div>
</body>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	var bridUpTimer;
	var bridDownTimer;
	var createZZTimer;
	$(".start").click(function(ev){
		// 阻止冒泡
		ev.stopPropagation();
		// 按钮和logo隐藏
		$(".logo, .button").hide();
		// 插入一根鸟岛bg里面
		$('<div class="brid"></div>').appendTo($(".bg"));
		// 开始定时器让鸟下降
		bridDownTimer = setInterval(birdDown,20);
		// 生成柱子 让柱子移动
		createZZTimer = setInterval(function(){
			var randomHeight = parseInt(Math.random()*152);
			$('<div class="zz"><div class="upBody"></div><div class="upHead"></div><div class="downHead"></div><div class="downBody"></div></div>').appendTo(".zzBox").children(".upBody").css("height", randomHeight).siblings(".downBody").css({"height": 151 - randomHeight, "top": 210+randomHeight+60}).siblings(".downHead").css("top", 210 + randomHeight);
		},2000);
		// 点击背景 让小鸟上升
		$(".bg").click(function(){
			// 上升的时候清除2个定时器，清除上升防止重复点击开启多个。清除下降的是防止鸟会一上一下
			clearInterval(bridUpTimer);
			clearInterval(bridDownTimer);
			var count = 0;
			// 鸟上升之前调整鸟头
			$(".brid").css("background-image","url(img/up_bird1.png)");
			// 开始鸟上升的定时器
			bridUpTimer = setInterval(function(){
				count++;
				// 上升30px之后就停止上升，开始下降
				if (count >= 10) {
					clearInterval(bridUpTimer);
					$(".brid").css("background-image","url(img/down_bird1.png)")
					bridDownTimer = setInterval(birdDown,20);
				}
				$(".brid").css("top", function(index,value){
					var bTop = parseInt(value) - 4;
					if (bTop <=0) {
						gameover();
					}
					return bTop;
				});
			},20);
		});
	});
	function birdDown(){
		$(".brid").css("top", function(index,value){
			var bTop = parseInt(value) + 3;
			if (bTop >=397) {
				gameover();
			}
			return bTop;
		});
	}
	// setInterval(gameover,3000)
	function gameover(){
		clearInterval(createZZTimer);
		clearInterval(moveZZTimer);
		clearInterval(bridDownTimer);
		clearInterval(bridUpTimer);
		$(".bg").off();
		$(".brid").css("background-image","url(img/down_bird1.png)").animate({top: "395px"},1000);
	}
	var num=0;
	var moveZZTimer = setInterval(function(){
		$(".zz").css("left",function(index,value){
			var zzLeft = parseInt(value) - 3;
			// this brid
			// 鸟右>柱左
			// 鸟左>柱右
			// 鸟顶< upHead底  或者  鸟底  >  downHead顶
			var bridPosition = $(".brid").position();
			var downHeadTop = $(this).children(".downHead").position().top;
			if (bridPosition.left + 40 > zzLeft && bridPosition.left < zzLeft + 60 && (bridPosition.top < downHeadTop - 150 || bridPosition.top + 26 > downHeadTop)) {
				gameover();
			}
			if (zzLeft <= -60) {
				num++
				this.remove();
			}
			$(".score").html(num);
			return zzLeft;
		})
	},20);
	// $(".start").attr("t","23");
	// 鸟
		// 会一直xiajinag
		// 点击bg会上升
		// 碰到柱子 - 游戏结束
		// 碰到顶部或路 - 游戏结束
	// 柱子
		// 每隔2s生成一根柱子，柱子空隙随机
		// 向左移动

	// 鸟过了一根柱子  +分
	// 游戏结束之后记录最高成绩
</script>
</html>